import React, { Component, useState } from 'react';
import { Col, Row, Breadcrumb, Layout, Menu, theme, ConfigProvider } from 'antd';
const { Header, Content, Footer, Sider } = Layout;
import { history } from 'umi';
import {
  DashboardOutlined,
  SettingOutlined,
  BankOutlined,
  DownSquareOutlined,
  UserOutlined,
  LogoutOutlined,
  LaptopOutlined,
  CiCircleOutlined
} from '@ant-design/icons';

import { useNavigate, Routes, Route, useLocation } from 'react-router-dom';

import SystemDesktop from '@/pages/Dashboard/SystemDesktop';
import UserManagement from '@/pages/SystemSetting/UserManagement';
import logoIn from '../assets/logo-w.png';

import styles from './BasicLayout.less'

const BasicLayout = () => {

  const navigate = useNavigate();
  const location = useLocation();

  const items = [
    {
      key: '/dashboard',
      icon: <DashboardOutlined />,
      label: '系统桌面',
    },
    {
      key: '/setting',
      icon: <SettingOutlined />,
      label: '系统设置',
      children: [
        {
          key: '/setting/user',
          label: '用户管理',
        }
      ],
    }
  ];

  const flattenItems = (items) => {
    return items.reduce((acc, item) => {
      acc[item.key] = item.label;
      if (item.children) {
        Object.assign(acc, flattenItems(item.children));
      }
      return acc;
    }, {});
  }

  const routerItem = flattenItems(items)

  const getLevelKeys = (items1) => {
    const key = {};
    const func = (items2, level = 1) => {
      items2.forEach((item) => {
        if (item.key) {
          key[item.key] = level;
        }
        if (item.children) {
          func(item.children, level + 1);
        }
      });
    };
    func(items1);
    return key;
  };

  const levelKeys = getLevelKeys(items);

  const [stateOpenKeys, setStateOpenKeys] = useState(['2', '23']);
  const [breadcrumbItems, setBreadcrumbItems] = useState([{
    href: '',
    title: <BankOutlined />,
  }, {
    href: '/dashboard',
    title: '系统桌面',
  }]);


  const onOpenChange = (openKeys) => {
    const currentOpenKey = openKeys.find((key) => stateOpenKeys.indexOf(key) === -1);
    // open
    if (currentOpenKey !== undefined) {
      const repeatIndex = openKeys
        .filter((key) => key !== currentOpenKey)
        .findIndex((key) => levelKeys[key] === levelKeys[currentOpenKey]);
      setStateOpenKeys(
        openKeys
          // remove repeat key
          .filter((_, index) => index !== repeatIndex)
          // remove current level all child
          .filter((key) => levelKeys[key] <= levelKeys[currentOpenKey]),
      );
    } else {
      // close
      setStateOpenKeys(openKeys);
    }
  };

  const onClick = ({ item, key, keyPath, domEvent }) => {
    changeDom(key)
    const tempItems = keyPath.reduceRight((acc, key) => {
      acc.push({
        href: key,
        title: routerItem[key],
      });
      return acc;
    }, []);

    setBreadcrumbItems((breadcrumbItems) => [
      breadcrumbItems[0],
      ...tempItems,
    ]);

  }


  //退出系统
  const returnLogin=()=>{
    history.push('/');
  }

  const [showText, setShowText] = useState(false);
  const changeUserMenuState = () => {
    setShowText(!showText);
  }

  const [showDom, setDom] = useState(<SystemDesktop/>);
  const pathMap ={
    "/dashboard": <SystemDesktop/>,
    "/setting/user": <UserManagement/>
  }
  const changeDom = (path) => {
    setDom(pathMap[path]);
  }

  return (

    <Layout>
      <Sider width="200px">
        <div className={styles.boxLeft}>
          <div className={styles.demoLogoVertical} >
            <img src={logoIn} alt="logo" />
          </div>
          <div className={styles.userMation}  onClick={changeUserMenuState} >
            <div className={styles.userImage}>
              <img
                src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
              />
            </div>
            <div className={styles.userInfo} >
              <div className={styles.userName}>
                我是老板
              </div>
              <div className={styles.userDepart}>
                董事长
              </div>
            </div>
            <div className={styles.rightPoint}>
              <DownSquareOutlined onClick={changeUserMenuState} className={styles.rightPointIcon} />
            </div>

          </div>
          <div className={styles.userMenu} style={{ display: showText ? 'block' : 'none' }}>
            <div className={styles.item}>
              <div className={styles.logo}>
                <UserOutlined />
              </div>
              <div className={styles.title}>个人信息</div>
            </div>
            <div className={styles.item}>
              <div className={styles.logo}>
                <LaptopOutlined />
              </div>
              <div className={styles.title}>我的设备</div>
            </div>
            <div className={styles.item}>
              <div className={styles.logo}>
                <SettingOutlined />
              </div>
              <div className={styles.title}>个人设置</div>
            </div>
            <div className={styles.item}>
              <div className={styles.logo}>
                <LogoutOutlined />
              </div>
              <div className={styles.title} onClick={returnLogin}>退出系统</div>
            </div>
          </div>
          <div className={styles.leftMenu}>
            <ConfigProvider
              theme={{
                components: {
                  Menu: {
                    itemColor: '#A5B2DB',
                    itemBg: '#2043BA',
                    itemSelectedBg: '#2386FE',
                    itemSelectedColor: '#FFFFFF',
                    itemBorderRadius: 0,
                    itemHoverBg: '#2386FE',
                    itemHoverColor: '#FFFFFF',
                    itemMarginInline: 0,
                    itemPaddingInline: 0
                  },
                }
              }}
            >
              <Menu className={styles.customMenuBackground}
                mode="inline"
                defaultSelectedKeys={['231']}
                openKeys={stateOpenKeys}
                onOpenChange={onOpenChange}
                onClick={onClick}
                items={items}
              />
            </ConfigProvider>
          </div>
        </div>
      </Sider>
      <Layout style={{
        minHeight: '100vh',
        width: 'calc(100% - 200px)'
      }}>
        <Header bordered='true' style={{ backgroundColor: '#fff', padding: '0 30px', borderBottom: '1px solid #e8e8e8' }}>
          <div className={styles.headerItem}>
            <Breadcrumb items={breadcrumbItems} />
          </div>
        </Header>
        <Content style={{ backgroundColor: '#eef0f3' }}>
          <div className={styles.contentItem}>
              {showDom}
          </div>
        </Content>
        <Footer style={{ padding: '0px' ,textAlign:'center',marginBottom:'10px',backgroundColor: '#eef0f3'}}>
          <>
            {`Copyright `}
            <CiCircleOutlined />
            {`深圳市网新新思软件有限公司 2019-2024 v2.9.1 (270web,270api) 2024.08.27.1530 `}
            { <a href="" download="简历抓取插件下载">简历抓取插件下载 | </a>}
            {<a href="" download="平安简历填写插件下载">平安简历填写插件下载 </a>}
          </>
        </Footer>
      </Layout>
    </Layout>

  );
}

export default BasicLayout;